<template>
  <van-pull-refresh v-model="refreshing" success-text="刷新成功" @refresh="onRefresh" class="hl-order-list" :class="{ 'hl-order-list-empty': list.length <= 0 }">
    <van-list v-model="loading" :finished="finished" @load="onLoad">
      <template v-if="list.length > 0">
        <div class="order-item" v-for="item in list" :key="item.id" @click.stop="$router.push({ name: 'OrderDetail', query: { id: item.id } })">
          <div class="order-item-time van-hairline--bottom">
            {{ item.createTime.slice(0, 16) }}
            <div class="order-item-price">{{ item.totalPrice }}</div>
          </div>
          <div class="order-item-box">
            <sjht-detail-item title="商品数量">{{ item.productList.length }}</sjht-detail-item>
            <sjht-detail-item title="下单商家">{{ item.store.name }}</sjht-detail-item>
            <sjht-detail-item title="订单编号">{{ item.orderNo }}</sjht-detail-item>
            <sjht-detail-item title="支付时间">{{ item.payTime }}</sjht-detail-item>
          </div>
        </div>
      </template>
      <template v-else>
        <van-empty v-if="!loading && !refreshing" image="search" description="暂无订单" />
      </template>
    </van-list>
  </van-pull-refresh>
</template>

<script>
import DetailItem from '../components/detail-item'
import { List, PullRefresh, Empty } from 'vant'
import { GetShopOrderPageList } from '../api/user'
export default {
  components: {
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Empty.name]: Empty,
    [DetailItem.name]: DetailItem
  },
  data() {
    return {
      current: undefined,
      loading: false, //是否处于加载状态，加载过程中不触发load事件
      finished: false, //是否已加载完成，加载完成后不再触发load事件
      refreshing: false, //是否下拉刷新
      list: []
    }
  },
  methods: {
    loadList(current) {
      current = current || 1
      GetShopOrderPageList(current)
        .then(res => {
          this.current = res.current
          const { list } = this
          res.list.forEach(item => {
            list.push(item)
          })
          this.finished = res.current >= res.pageTotal || list.length >= res.total
        })
        .catch(err => {
          this.$toast(err)
          this.finished = true
        })
        .finally(() => {
          this.loading = false //加载状态结束
          this.refreshing = false //刷新状态结束
        })
    },
    //下拉刷新
    onRefresh() {
      this.list = []
      this.loadList(1)
    },
    //触底分页
    onLoad() {
      this.loadList(this.current + 1)
    }
  }
}
</script>
<style lang="less" scoped>
.hl-order-list {
  padding: 8px 16px;
  min-height: calc(100vh - 46px - 66px);
  &-empty {
    background-color: #fff;
  }
}
.order-item {
  padding: 16px;
  background-color: #fff;
  color: #666;
  border-radius: 16px;

  &:nth-of-type(n + 2) {
    margin-top: 8px;
  }
  &-time {
    padding-bottom: 8px;
    // &::after {
    //   content: '';
    //   display: table;
    //   clear: both;
    // }
    // display: flex;
  }
  &-price {
    float: right;
    margin-top: -8px;
    // flex: 1 1 0%;
    color: #ff823a;
    // display: flex;
    // align-items: center;
    // justify-content: flex-end;
    margin-left: 6px;
    font-size: 1.5em;
    &::before {
      content: '¥';
      font-size: 0.8em;
      margin-right: 2px;
    }
  }
  // &-box {
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-between;
  //   font-size: 14px;
  //   padding-top: 8px;
  // }
  // &-content {
  //   flex-shrink: 0;
  //   color: #999;
  // }
  // &-price {
  //   flex: 1 1 0%;
  //   color: #ff823a;
  //   display: flex;
  //   align-items: center;
  //   justify-content: flex-end;
  //   margin-left: 6px;
  //   font-size: 1.5em;
  //   &::before {
  //     content: '¥';
  //     font-size: 0.8em;
  //     margin-right: 2px;
  //   }
  // }
}
</style>
